<template>
  <div class="process-panel__container" :style="{ width: `${this.width}px` }">

    <el-collapse>
      <el-collapse-item name="base">
        <template #title>
          <div class="panel-tab__title">
            <el-icon>
              <info-filled/>
            </el-icon>
            常规
          </div>
        </template>
        <element-base-info
            :business-object="elementBusinessObject"
            :type="elementType"/>
      </el-collapse-item>

      <el-collapse-item name="task_" v-if="elementType.indexOf('UserTask') !== -1" key="task">
        <template #title>
          <div class="panel-tab__title">
            <el-icon>
              <checked/>
            </el-icon>
            审批人
          </div>
        </template>

        <start-act-task-candidate-config v-model="candidateConfig[this.elementId] "/>
      </el-collapse-item>
      <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
        <template #title>
          <div class="panel-tab__title">
            <el-icon>
              <checked/>
            </el-icon>
            任务
          </div>
        </template>
        <element-task :id="elementId" :type="elementType"/>
      </el-collapse-item>
      <el-collapse-item name="condition" v-if="['UserTask','Process'].includes(elementType)" key="form">
        <template #title>
          <div class="panel-tab__title">
            <el-icon>
              <list/>
            </el-icon>
            表单
          </div>
        </template>
        <element-form v-model="formConfig[elementId]"/>
      </el-collapse-item>

      <el-collapse-item name="condition" v-if="conditionFormVisible" key="condition">
        <template #title>
          <div class="panel-tab__title">
            <el-icon>
              <promotion/>
            </el-icon>
            流转条件
          </div>
        </template>
        <flow-condition :element-id="elementId" :type="elementType"/>
      </el-collapse-item>


      <el-collapse-item name="multiInstance" v-if="elementType.indexOf('Task') !== -1" key="multiInstance">
        <template #title>
          <div class="panel-tab__title">
            <el-icon>
              <help-filled/>
            </el-icon>
            多实例
          </div>
        </template>
        <element-multi-instance :business-object="elementBusinessObject" :type="elementType"/>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import ElementBaseInfo from "./base/ElementBaseInfo.vue";
import ElementTask from "./task/ElementTask.vue";
import ElementMultiInstance from "./multi-instance/ElementMultiInstance.vue";
import FlowCondition from "./flow-condition/FlowCondition.vue";
import ElementForm from "./form/ElementForm.vue";
import UserTaskListeners from "./listeners/UserTaskListeners.vue";
import StartActTaskCandidateConfig from "./task/startActTaskCandidateConfig.vue";

import StartActCarbonCopy from "components/start-activiti/penal/startActCarbonCopy.vue";
import {ArrowRightBold} from "@element-plus/icons-vue";

/**
 * 侧边栏
 * @Author MiyueFE
 * @Home https://github.com/miyuesc
 * @Date 2021年3月31日18:57:51
 */
export default {
  name: "startPropertiesPanel",
  components: {
    ArrowRightBold,
    StartActCarbonCopy,
    StartActTaskCandidateConfig,
    UserTaskListeners,
    ElementForm,
    FlowCondition,
    ElementMultiInstance,
    ElementTask,
    ElementBaseInfo
  },
  componentName: "startPropertiesPanel",
  props: {
    bpmnModeler: Object,
    prefix: {
      type: String,
      default: "camunda"
    },
    width: {
      type: Number,
      default: 480
    },
    candidateConfig: {
      type: Object,
      required: true,
    },
    formConfig: {
      type: Object,
      required: true,
    },


  },
  provide() {
    return {
      prefix: this.prefix,
      width: this.width,
    };
  },
  data() {
    return {
      elementId: "",
      elementType: "",
      elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
      conditionFormVisible: false, // 流转条件设置
      modeNodeConfig: {}
    };
  },
  watch: {},
  created() {
    this.initModels();
  },
  methods: {
    initModels() {
      // 初始化 modeler 以及其他 moddle
      if (!this.bpmnModeler) {
        // 避免加载时 流程图 并未加载完成
        this.timer = setTimeout(() => this.initModels(), 10);
        return;
      }
      if (this.timer) clearTimeout(this.timer);
      window.bpmnInstances = {
        modeler: this.bpmnModeler,
        modeling: this.bpmnModeler.get("modeling"),
        moddle: this.bpmnModeler.get("moddle"),
        eventBus: this.bpmnModeler.get("eventBus"),
        bpmnFactory: this.bpmnModeler.get("bpmnFactory"),
        elementFactory: this.bpmnModeler.get("elementFactory"),
        elementRegistry: this.bpmnModeler.get("elementRegistry"),
        replace: this.bpmnModeler.get("replace"),
        selection: this.bpmnModeler.get("selection")
      };
      this.getActiveElement();
    },
    getActiveElement() {
      // 初始第一个选中元素 bpmn:Process
      this.initFormOnChanged(null);
      this.bpmnModeler.on("import.done", e => {
        this.initFormOnChanged(null);
      });
      // 监听选择事件，修改当前激活的元素以及表单
      this.bpmnModeler.on("selection.changed", ({newSelection}) => {
        this.initFormOnChanged(newSelection[0] || null);
      });
      this.bpmnModeler.on("element.changed", ({element}) => {
        // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
        if (element && element.id === this.elementId) {
          this.initFormOnChanged(element);
        }
      });
    },
    // 初始化数据
    initFormOnChanged(element) {
      let activatedElement = element;
      if (!activatedElement) {
        activatedElement =
            window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Process") ??
            window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Collaboration");
      }
      if (!activatedElement) return;
      window.bpmnInstances.bpmnElement = activatedElement;
      let elementType = activatedElement.type.split(":")[1] || "";
      this.elementId = activatedElement.id;
      this.candidateConfig[this.elementId] = this.candidateConfig[this.elementId] || {}
      this.formConfig[this.elementId] = this.formConfig[this.elementId] || {}
      // console.log("elementId,formConfig,candidateConfig", this.formConfig, this.candidateConfig);
      this.bpmnElement = activatedElement;

      this.elementType = elementType
      this.elementBusinessObject = JSON.parse(JSON.stringify(activatedElement.businessObject));
      this.conditionFormVisible = !!(
          this.elementType === "SequenceFlow" &&
          activatedElement.source &&
          activatedElement.source.type.indexOf("StartEvent") === -1
      );
    },
    beforeUnmount() {
      window.bpmnInstances = null;
    }
  }
};
</script>
<style lang="scss" scoped>
.process-panel__container {
  .el-collapse {
    left: 0;
    right: 0;
    overflow: scroll;
    position: absolute;
    top: 0;
    bottom: 0;
    padding-bottom: 50px;

  }
}
</style>
